<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="./css/index.css"/>
	<script src="./js/jquery-3.2.1.min.js"></script>
    <title>用户注册</title>
	
</head>
<body>
    <header>
    	<div class="lf">
    		<a class="home" href="index.html" onclick="return false;">系统首页</a>
    		<!-- <a href="bbs.html">论坛</a> -->
    		<a href="upload.html" onclick="return false;">上传资料</a>
    	</div>
    	<div id="search">
    		<input type="text" name="name" 
    			placeholder="请输入要搜索的资源" autocomplete="off"/><a class="search btn">搜索</a>
    	</div>
    	
    	<div class="rf">
    		<a href="login.html">登录/注册</a>
    		<a class="info" href="personal.html" onclick="return false;">个人中心</a>
    		<a class="cols" href="shoucang.html" onclick="return false;">收藏</a>
    		<a class="exit" onclick="return false;">退出登录</a>
    	</div>
    </header>
	
	
	<article>
		<!-- 网站主体 -->
		<div id="main">
			<section class="ct">
				<!-- 上传表单-->
				<div class="upload">
					<h1>用户注册①<em>填写信息、完成用户注册第一步。已有账号，请点击<a href="">登录</a></em></h1>
					<!-- 注册步骤导航-->
					<div class="reg_step">
						<a class="step">注册信息</a><a class="step2">基本信息</a><a class="step2">注册完成</a>
					</div>
				
					<form action="./next_reg.html" autocomplete="off" id="myform" method="post">
						
						<p>
							<label>手机号：</label>
							<input class="upt" type="text" name="username" value=""/>
							<em class="em-error"></em>
						</p>
						<p>
							<label>密码：</label>
							<input class="upt" type="password" name="password" id="password" value="" placeholder="密码长度为6-20位" />
							<em class="em-error"></em>
						</p>
						<p>
							<label>确认密码：</label>
							<input class="upt" type="password" name="confirmPassword" value="" placeholder="请再次输入密码"/>
							<em class="em-error"></em>
							<span class="source-tag-msg">两次输入的密码必须保持一致</span>
						</p>
						
						<p>
							<label>电子邮箱：</label>
							<input id="email" class="upt" type="text" name="email" value="" placeholder="请输入邮箱"/>
							<em class="em-error"></em>
							<span class="source-tag-msg">您丢失密码后找回密码的凭证</span>
						</p>
						
						<p><a class="btn" id="submitBtn">注册</a></p>
					</form>
				</div>
			</section>	
		</div>
	</article>
	<footer>
		<p class="decro">本站所有资源信息均由网友上传,本站只是为了推广资源让更多读者下载,使用。如涉侵权，请联系管理员</p>
		<p class="cr">Copyright © 2021-2025 <span class="site">爱下载资源分享平台</span> All Rights Reserved.</p>
		<p class="num">沪ICP备14048333号</p>
	</footer>


<script>
	$(function (){
		//获取焦点方法
		function focusItem(dom) {
			let eBox = $(dom).next();
			eBox.text("");
		}

		//失去焦点的函数
		function checkItem(dom) {
			let eBox = $(dom).next();
			let name = $(dom).attr("name");
			let value = $(dom).val();
			let errorMessage = "", isError = true;
			switch (name) {
				case "username":
					if (/^\s*$/.test(value)) {
						errorMessage = "手机号不能为空!";
					}else if (!/^\d{11}/.test(value)){
						errorMessage = "手机号码应该是十一位!";
					}else {
						isError = false;
					}
					break;
				case "password":
					if (/^\s*$/.test(value)) {
						errorMessage = "密码不能为空!";
					}else if (!/^[A-Za-z0-9]{6,20}$/.test(value)){
						errorMessage = "密码是6-20位数字字母组合!";
					}else {
						isError = false;
					}
					break;
				case "confirmPassword":
					if (/^\s*$/.test(value)) {
						errorMessage = "确认密码不能为空!";
					} else if (value != $("#password").val()) {
						errorMessage = "两次输入的密码不相同!";
					} else {
						isError = false;
					}
					break;
				case "email":
					if (!/^[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+\.[A-Za-z]{2,4}$/.test(value)) {
						errorMessage = "邮箱格式不对!";
					} else {
						isError = false;
					}
					break;
				default:
					isError = false;
					break;
			}
			if (isError) {
				eBox.text(errorMessage);
				return false;
			}
			return true;
		}

		//获得焦点
		$('.upt').focus(function () {
			focusItem(this);
		});

		//失去焦点事件
		$('.upt').blur(function () {
			checkItem(this);
		});


		$("#submitBtn").click(function(e){
			e.preventDefault();
			//获取到使用input输入框
			let int = $(".upt");

			//判断状态,是否有输入框不合法
			let flag = true;
			int.each(function(){
				let zha = checkItem(this);
				if(!zha){
					flag = false;
				}
			});

			//合法则提交登录或注册,不合法不做任何操作
			if (flag) {
				$.get(
						"loginServlet/register",
						$("#myform").serialize(),
						function (data){
							console.log(data);
							if (data.code == 504){
								alert(data.msg);
								location.href = "next_reg.html?id="+data.obj;
							}else {
								alert(data.msg);
							}
						}
				);
			}
		});

	});

	// $('#submitBtn').click(function (e){
	// 	//阻止默认提交行为
	// 	e.preventDefault();
	// 	//获取字段值
	// 	const username = $('input[name="username"]').val().trim();
	// 	const password = $('input[name="password"]').val();
	// 	const confirmPassword = $('input[name="confirmPassword"]').val();
	// 	const email = $('#email').val().trim();
	// 	//匹配11位数字的电话号码
	// 	const phonePattern = /^\d{11}/;
	// 	//匹配6到20位密码
	// 	const passwordPattern = /^.{6,20}$/;
	// 	//验证手机号
	// 	if(!phonePattern.test(username)){
	// 		$('#phoneError').text("手机号必须为11位！");
	// 		e.preventDefault();
	// 	}else {
	// 		$('#phoneError').text("");
	// 	}
	// 	//验证密码
	// 	if(!passwordPattern.test(password)){
	// 		$('#passwordError').text("密码长度必须在6-20位之间！");
	// 		e.preventDefault();
	// 	}else {
	// 		$('#passwordError').text("");
	// 	}
	// 	console.log(password)
	// 	//验证确认密码
	// 	if (password !== confirmPassword) {
	// 		$('#confirmPasswordError').text("密码不一致！");
	// 		e.preventDefault();
	// 	} else {
	// 		$('#confirmPasswordError').text("");
	// 	}
	// 	console.log(confirmPassword)
	// 	// 验证电子邮箱
	// 	const emailPattern = /^[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+\.[A-Za-z]{2,4}$/;
	// 	if (!emailPattern.test(email)) {
	// 		$('#emailError').text("请输入有效的电子邮箱地址！");
	// 		e.preventDefault();
	// 	} else {
	// 		$('#emailError').text("");
	// 	}
	// 	// 没有任何错误消息，提交表单
	// 	if ($('#phoneError').text() === "" && $('#passwordError').text() === "" && $('#confirmPasswordError').text() === "" && $('#emailError').text() === "") {
	// 		$('#myform').submit();
	// 	};
	//
	// 	$.ajax({
	// 		type: "get",
	// 		url: "loginServlet/register",
	// 		data:{username:username, password:password, email: email},
	// 		success:function (data){
	// 			if (data.code == 504){
	// 				location.href = "next_reg.html";
	// 			}else{
	// 				alert(data.msg);
	// 			}
	// 		}
	// 	});
	// });
</script>
</body>

</html>